<!-- 秒,分钟 -->
<script>
import {
  ElCheckbox,
  ElCheckboxGroup,
  ElInputNumber,
  ElRadio,
} from 'element-plus'

export default {
  components: { ElRadio, ElInputNumber, ElCheckboxGroup, ElCheckbox },
  props: {
    modelValue: {
      type: String,
      default: '*',
    },
    lable: {
      type: String,
    },
  },
  emits: ['update:modelValue'],
  data() {
    return {
      type: '1',
      cycle: {
        start: 0,
        end: 0,
      },
      loop: {
        start: 0,
        end: 0,
      },
      week: {
        start: 0,
        end: 0,
      },
      work: 0,
      last: 0,
      appoint: [], // 指定
    }
  },
  computed: {
    value() {
      const result = []
      switch (this.type) {
        case '1': // 每秒
          result.push('*')
          break
        case '2': // 年期
          result.push(`${this.cycle.start}-${this.cycle.end}`)
          break
        case '3': // 循环
          result.push(`${this.loop.start}/${this.loop.end}`)
          break
        case '4': // 指定
          result.push(this.appoint.join(','))
          break
        case '6': // 最后
          result.push(`${this.last === 0 ? '' : this.last}L`)
          break
        default: // 不指定
          result.push('?')
          break
      }
      return result.join('')
    },
  },
  watch: {
    value: {
      handler(val) {
        this.$emit('update:modelValue', val)
      },
      immediate: true,
    },
    modelValue: {
      handler(val) {
        this.updateVal(val)
      },
      immediate: true,
    },
  },
  methods: {
    updateVal(value) {
      if (!value)
        return
      if (value === '?') {
        this.type = '5'
      }
      else if (value.includes('-')) {
        // 2周期
        if (value.split('-').length === 2) {
          this.type = '2'
          this.cycle.start = Number(value.split('-')[0])
          this.cycle.end = Number(value.split('-')[1])
        }
      }
      else if (value.includes('/')) {
        // 3循环
        if (value.split('/').length === 2) {
          this.type = '3'
          this.loop.start = Number(value.split('/')[0])
          this.loop.end = Number(value.split('/')[1])
        }
      }
      else if (value.includes('*')) {
        // 1每
        this.type = '1'
      }
      else if (value.includes('L')) {
        // 6最后
        this.type = '6'
        this.last = value.replace('L', '')
      }
      else if (value.includes('#')) {
        // 7指定周
        if (value.split('#').length === 2) {
          this.type = '7'
          this.week.start = Number(value.split('#')[0])
          this.week.end = Number(value.split('#')[1])
        }
      }
      else if (value.includes('W')) {
        // 8工作日
        this.type = '8'
        this.work = Number(value.replace('W', ''))
      }
      else {
        // *
        this.type = '4'
        this.appoint = value.split(',')
      }
    },
  },
}
</script>

<template>
  <div :val="value">
    <div>
      <ElRadio v-model="type" label="1" size="small" border>
        每{{ lable }}
      </ElRadio>
    </div>
    <div>
      <ElRadio v-model="type" label="2" size="small" border>
        周期
      </ElRadio>
      <span style="margin-left: 10px; margin-right: 5px">从</span>
      <ElInputNumber
        v-model="cycle.start"
        :min="1"
        :max="59"
        size="small"
        style="width: 100px"
        @change="type = '2'"
      />
      <span style="margin-left: 5px; margin-right: 5px">至</span>
      <ElInputNumber
        v-model="cycle.end"
        :min="2"
        :max="59"
        size="small"
        style="width: 100px"
        @change="type = '2'"
      />
      {{ lable }}
    </div>
    <div>
      <ElRadio v-model="type" label="3" size="small" border>
        循环
      </ElRadio>
      <span style="margin-left: 10px; margin-right: 5px">从</span>
      <ElInputNumber
        v-model="loop.start"
        :min="0"
        :max="59"
        size="small"
        style="width: 100px"
        @change="type = '3'"
      />
      <span style="margin-left: 5px; margin-right: 5px">{{ lable }}开始，每</span>
      <ElInputNumber
        v-model="loop.end"
        :min="1"
        :max="59"
        size="small"
        style="width: 100px"
        @change="type = '3'"
      />
      {{ lable }}执行一次
    </div>
    <div>
      <ElRadio v-model="type" label="4" size="small" border>
        指定
      </ElRadio>
      <ElCheckboxGroup v-model="appoint">
        <div
          v-for="i in 6"
          :key="i"
          style="margin-left: 10px; line-height: 25px"
        >
          <ElCheckbox
            v-for="j in 10"
            :key="j"
            :label="`${i - 1}${j - 1}`"
            @change="type = '4'"
          />
        </div>
      </ElCheckboxGroup>
    </div>
  </div>
</template>

<style lang="less" scoped>
.el-checkbox + .el-checkbox {
  margin-left: 10px;
}
</style>
